<template>
	<view class="c-wrap">
		<u-popup v-model="showDatePicker" mode="bottom" z-index="9999">
			<view class="timePick-header">
				<view class="timePick-header_cancel" @click="showDatePicker = false">取消</view>
				<view class="timePick-header_title">选择时间</view>
				<view class="timePick-header_confirm" @click="onConfirmTap">确认</view>
			</view>
			<view class="timePick-type">
				<view class="timePick-typeItem" :class="{active: dateTypeIndex == index}"
					v-for="(item, index) in dateTypeList" :key="index" @click="onDateTypeTap(index)">{{item.name}}
				</view>
				<view class="timePick-type_border" :style="{left: `${46 + 750/5 * dateTypeIndex}rpx`}"></view>
			</view>
			<view class="timePick-startend">
				<view class="timePick-start" :class="{active: timeBlockIndex == 0}" @click="onTimeBlockTap(0)">
					<view>开始时间</view>
					<view>{{beginDate}}</view>
				</view>
				<view class="timePick-end" :class="{active: timeBlockIndex == 1}" @click="onTimeBlockTap(1)">
					<view>结束时间</view>
					<view>{{endDate}}</view>
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="timePick-picker">
				<block v-if="dateTypeIndex == 4">
					<picker-view-column>
						<view class="timePick-pickerItem" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="timePick-pickerItem" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="timePick-pickerItem" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</block>
			</picker-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const initBeginDate = new Date(year, month-1, day - 7 + 1).Format('yyyy-MM-dd')
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				onConfirmFlag: false,
				showDatePicker: false,
				years,
				year,
				months,
				month,
				days,
				day,
				value: [year, month - 1, day - 1],
				indicatorStyle: `height: 50px;`,
				dateTypeIndex: 4,
				dateTypeList: [{
					name: '全部',
					type: 0
				}, {
					name: '近七天',
					type: 1
				}, {
					name: '近两周',
					type: 2
				}, {
					name: '近三周',
					type: 3
				}, {
					name: '本月',
					type: 4
				}, {
					name: '自定义',
					// type: 5
					type: 0
				}],
				timeBlockIndex: -1,
				beginDate: initBeginDate,
				endDate: date.Format('yyyy-MM-dd')
			}
		},
		watch: {
			show(val) {
				console.log(val);
				this.showDatePicker = val
			},
			showDatePicker(val) {
				if (this.onConfirmFlag) {
					this.$emit('dateChange', {
						beginDate: this.beginDate,
						endDate: this.endDate,
						dateType: this.dateTypeList[this.dateTypeIndex].type,
						dateTypeName: this.dateTypeList[this.dateTypeIndex].name
					})
				}
				this.$emit('change', val)
				this.onConfirmFlag = false
			}
		},
		created() {

		},
		methods: {
			onConfirmTap() {
				this.onConfirmFlag = true
				this.showDatePicker = false
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				if (this.timeBlockIndex == 0) {
					this.beginDate = `${this.year}-${this.month}-${this.day}`
				} else if (this.timeBlockIndex == 1) {
					this.endDate = `${this.year}-${this.month}-${this.day}`
				}
			},
			onDateTypeTap(index) {
				this.dateTypeIndex = index
				if (index == 5) {
					this.timeBlockIndex = 0
					return
				}
				this.timeBlockIndex = -1
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth()
				const day = date.getDate()
				this.endDate = date.Format('yyyy-MM-dd')
				if (index == 1) { // 7天
					this.beginDate = new Date(year, month, day - 7 + 1).Format('yyyy-MM-dd')
				} else if (index == 2) { // 2周
					this.beginDate = new Date(year, month, day - 14 + 1).Format('yyyy-MM-dd')
				} else if (index == 3) { // 三周
					this.beginDate = new Date(year, month, day - 21 + 1).Format('yyyy-MM-dd')
				} else if (index == 4) { // 本月
					this.beginDate = new Date(year, month, 1).Format('yyyy-MM-dd')
				} else if(index == 0) {
					this.beginDate = '1980-01-01'
				}
			},
			onTimeBlockTap(index) {
				if (this.dateTypeIndex != 5) return
				this.timeBlockIndex = index
				let arr
				if (index == 0) {
					arr = this.beginDate.split('-')
				} else if (index == 1) {
					arr = this.endDate.split('-')
				}
				arr && (this.value = [this.years.findIndex(item => item == arr[0]), arr[1] - 1, arr[2] - 1])
			}
		}
	}
</script>

<style scoped lang="scss">
	.timePick-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
	}

	.timePick-header_cancel {
		color: #999;
	}

	.timePick-header_title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.timePick-header_confirm {
		color: $g-main-color;
	}

	.timePick-type {
		position: relative;
		display: flex;
		margin-bottom: 42rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.timePick-typeItem {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
		font-size: 26rpx;
		color: #808080;

		&.active {
			color: #333;
			font-weight: bold;
		}
	}

	.timePick-type_border {
		position: absolute;
		left: 46rpx;
		bottom: 4rpx;
		width: 50rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: $g-main-color;
		transition: all 0.3s;
		// border-bottom: 2px solid $g-main-color;
	}

	.timePick-startend {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.timePick-start {
		position: relative;

		&::after {
			position: absolute;
			top: 50%;
			right: -50rpx;
			content: '';
			width: 30rpx;
			border-bottom: 1px solid #ccc;
		}
	}

	.timePick-start,
	.timePick-end {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 310rpx;
		height: 110rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #808080;
		background-color: $g-main-bg;

		view {
			&:first-child {
				margin-bottom: 8rpx;
			}
		}

		&.active {
			background-color: #fff;
			color: $g-main-color;
			border: 1px solid $g-main-color;
		}
	}

	.timePick-picker {
		width: 750rpx;
		height: 300rpx;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.timePick-pickerItem {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}
</style>
